<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>商品分类</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/zepto.min.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript" src="../script/doT.min.js"></script>
    <style>
        #header{
            background: #fff;
        }
        #header .aui-bar{
            background:transparent;
            color:#000;
            border-bottom:1px solid #ccc;
        }
        #header .aui-bar .aui-btn .aui-icon-left{
            color:#000;
        }
        #center{
          background: #fff;
          display: flex;
          justify-content: flex-start;
        }
        #leftList{
          width: 30%;
          border-top: 1px solid #F3F3F3;
          border-right: 1px solid #F3F3F3;
          overflow-y: auto;
        }
        #rightList{
          width: 70%;
          overflow-y: auto;
        }
        .left_items{
            width: 80%;
            margin: 5px 10%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 25px;
        }
        .right_items{
            width: 100%;
            border-top: 1px solid #F3F3F3;
            display: flex;
            justify-content: flex-start;
            flex-wrap:wrap;
        }
        .right_items_subgrade{
          width: 32%;
          padding: 5%;
          margin: 5px 1% 0 0;
          font-size: 0.6rem;
          text-align: center;
        }
        .right_items_title{
          width: 100%;
          height: 50px;
          padding:0 15px;
          display: flex;
          align-items:center;
          justify-content: space-between;
          line-height: 50px;
          font-size: 14px;
        }
        .right_items_title span {
          font-size: 12px;
          color: ##999999;
        }
        .select{
            background: #FE417A;
            color:#fff;
        }

    </style>
</head>

<body>
    <!-- <div class="aui-searchbar" id="search">
        <div class="aui-searchbar-input aui-border-radius" tapmode>
            <i class="aui-iconfont aui-icon-search"></i>
            <form action="javascript:search();">
                <input type="search" placeholder="请输入搜索内容" id="search-input">
            </form>
        </div>
        <div class="aui-searchbar-cancel" tapmod onclick="doSearch()">搜索</div>
    </div> -->
    <div id="center">
        <div id="leftList"></div>
        <div id="rightList"></div>
    </div>
</body>
<script type="text/javascript">
    var searchH,data;
    apiready = function () {

        // var search = $api.byId('search');
        // searchH = $api.fixStatusBar(search);
        searchH = 0;
        console.log(api.winHeight)
        $api.css($api.dom('#leftList'),'height:'+(window.innerHeight+40)+'px');
        $api.css($api.dom('#rightList'),'height:'+(window.innerHeight+40)+'px');
        var listData='',rightData='',scrollIndex=0,oldIndex=0,onOff;
        _Ajax(window.APIServerZGD.SuperClass, 'get', {}, 'json', function (ret) {
            if (ret.code == 1) {
                data = ret.general_classify
                for (var i = 0; i < data.length; i++) {
                    var DataSubgrade = ''
                    for (var j = 0; j < data[i].data.length; j++) {
                        var element = data[i].data[j],name = element.next_name
                        DataSubgrade += '<div onclick="goSuperItem(\''+name+'\')" class="right_items_subgrade"><img src="'+element.info[0].imgurl+'"/>'+element.next_name+'</div>';
                    }

                    listData+='<div class="left_items">'+data[i].main_name+'</div>';
                    rightData+='<div class="right_items"><div class="right_items_title">'+data[i].main_name+'<span onclick="goSuperItem(\''+data[i].main_name+'\','+data[i].cid+')">查看更多</span></div>'+DataSubgrade+'</div>';

                }
                $('#leftList').html('<div class="list_all">'+listData+'</div>');
                $('#rightList').html(rightData);
                $api.addCls($api.domAll('.left_items')[0],'select');
                var leftItems = $api.domAll('.left_items')
                for (var i = 0; i < leftItems.length; i++) {
                  (function(i){
                    $api.addEvt(leftItems[i],'click',function(){
                        var rightListHeight = $api.domAll('.right_items')[leftItems.length-1].offsetTop + $api.domAll('.right_items')[leftItems.length-1].clientHeight
                        scrollIndex = i
                        if( $api.domAll('.right_items')[i].offsetTop > (rightListHeight - $api.dom('.list_all').clientHeight)){
                          onOff = false
                          $api.dom('#rightList').scrollTop = rightListHeight - $api.dom('.list_all').clientHeight - searchH
                          LeftChang()
                        }else{
                          onOff = true
                          $api.dom('#rightList').scrollTop = $api.domAll('.right_items')[i].offsetTop-searchH
                        }
                    })
                  })(i)
                }
            } else {
                console.log(JSON.stringify(ret.msg))
            }
        });
        $api.addEvt($api.dom('#rightList'), 'scroll', function(e){
            var rightItemsHeight = $api.domAll('.right_items')[scrollIndex].offsetTop + $api.domAll('.right_items')[scrollIndex].clientHeight
            if(rightItemsHeight-(searchH+1) < $api.dom('#rightList').scrollTop){
              scrollIndex++
            }
            if($api.domAll('.right_items')[scrollIndex].offsetTop-(searchH+1) > $api.dom('#rightList').scrollTop){
              if(onOff){
                scrollIndex--
              }
              onOff = true
            }
            LeftChang()
        });

        function LeftChang(){
          if(scrollIndex != oldIndex){
              $api.removeCls($api.domAll('.left_items')[oldIndex],'select');
              $api.addCls($api.domAll('.left_items')[scrollIndex],'select');
              oldIndex = scrollIndex
          }
        }
    };

    // function doSearch(){
    //   api.openWin({
    //     name: 'super_item_frm',
    //     url: './super_item_frm.html',
    //     rect: {
    //         x: 0,
    //         y: 0,
    //         w: 'auto',
    //         h: 'auto'
    //     },
    //     pageParam: {
    //         title: $('#search-input').val()
    //     }
    //   });
    // }

    function goSuperItem(title,type){
      if(typeof(type) == 'number'){
        api.openWin({
          name: 'super_item_frm',
          url: './super_item_frm.html',
          rect: {
              x: 0,
              y: 0,
              w: 'auto',
              h: 'auto'
          },
          pageParam: {
              title: title
          }
        });
      }else{
        api.openWin({
          name: 'super_item_frm',
          url: './super_item_frm.html',
          rect: {
              x: 0,
              y: 0,
              w: 'auto',
              h: 'auto'
          },
          pageParam: {
              title: title
          }
        });
      }
    }
</script>
</html>
